<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
  <head>
    <title>Animation Elements 1.0</title>
    <meta charset="utf-8">
    <script src="respec/respec.js" class="remove"></script>
    <script src="respec/js/sh_html.min.js" class="remove"></script>
    <script class='remove'>
      var respecConfig = {
        // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
        // ED.
        specStatus: "unofficial",

        // the specification's short name, as in
        // http://www.w3.org/TR/short-name/
        // shortName:            "animation-elements",

        // if your specification has a subtitle that goes below the main
        // formal title, define it here
        // subtitle   :  "an excellent document",

        // if you wish the publication date to be other than today, set this
        // publishDate:  "2009-08-06",

        // if the specification's copyright date is a range of years, specify
        // the start date here:
        // copyrightStart: "2005"

        // if there is a previously published draft, uncomment this and set
        // its YYYY-MM-DD date and its maturity status
        // previousPublishDate: "1977-03-15",
        // previousMaturity: "WD",

        // if there a publicly available Editor's Draft, this is the link
        // edDraftURI:
        // "http://dev.w3.org/2009/dap/ReSpec.js/documentation.html",

        // if this is a LCWD, uncomment and set the end of its review period
        // lcEnd: "2009-08-05",

        // if you want to have extra CSS, append them to this list
        // it is recommended that the respec.css stylesheet be kept
        extraCSS: ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css",
                   "web-animations.css"],

        // Turning off inlineCSS for now since if extraCSS points to
        // a relative URL your testing from a file URL the XHR will fail.
        // Probably should turn this back on once this is hosted on a server
        // somewhere.
        inlineCSS: false,

        // editors, add as many as you like
        // only "name" is required
        editors:  [
            { name: "Brian Birtles", mailto: "bbirtles@mozilla.com",
              company: "Mozilla Japan", companyURL: "http://mozilla.jp/" }
        ],

        // authors, add as many as you like.
        // This is optional, uncomment if you have authors as well as editors.
        // only "name" is required. Same format as editors.

        //authors:  [
        //    { name: "Your Name", url: "http://example.org/",
        //      company: "Your Company", companyURL: "http://example.com/" },
        //],

        // XXX If we continue using ReSpec then we need to tweak it to support
        // multiple working groups. It includes updating the patent section
        // prose to say "groups" instead of "group" etc.
        // name of the WG
        wg: "SVG Working Group (part of the Graphics Activity)",

        // URI of the public WG page
        wgURI: "http://www.w3.org/Graphics/",

        // name (without the @w3c.org) of the public mailing to which comments
        // are due
        wgPublicList: "public-fx",

        // URI of the patent status for this WG, for Rec-track documents
        // !!!! IMPORTANT !!!!
        // This is important for Rec-track documents, do not copy a patent URI
        // from a random document unless you know what you're doing. If in
        // doubt ask your friendly neighbourhood Team Contact.
        wgPatentURI:  "",

        noIDLSorting: true,
        noIDLIn: true
      };
    </script>
  </head>
  <body>
    <section id='abstract'>
      This specification defines an element-based markup for defining
      animation and time-related changes to a Web page.
      It is intended to replace the animation features of <a
      href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> by building on the model
      defined in <a href="http://www.w3.org/TR/web-animations/">Web
      Animations</a>.
    </section>

    <section>
      <h2>Introduction</h2>
      <p class="todo">TBD</p>
      <section class="informative">
        <h2>Use cases</h2>
        <h4>Tweening and cutout animation</h4>
        <p>
          A common animation technique involves taking some graphical elements
          and interpolating their properties such as position or color or moving
          them along a path.
          This is sometimes referred to as <em>cutout animation</em> since the
          moving parts were traditionally represented by separate shapes cut
          from cardboard or similar material.
        </p>
        <p>
          For example, in the following segment of a cartoon, a golfer swings
          his arms (and club!) and as a result the golf ball follows
          a trajectory through the air before bouncing along the ground.
        </p>
        <pre class='example sh_html'>
&lt;path id="golferBody" d="&hellip;"/&gt; 
&lt;g id="armsAndClub"&gt;
  &lt;path id="club" d="&hellip;"/&gt; 
  &lt;path id="arms" d="&hellip;"/&gt; 
&lt;/g&gt;
&lt;circle id="ball" &hellip;/&gt;
&lt;seq&gt;
  &lt;!-- Rotate man's arms and club --&gt;
  &lt;animate href="armsAndClub" attributeName="transform"
    values="rotate(0); rotate(-120); rotate(30); rotate(0)"
    keyTimes="0; 0.5; 0.8; 1" additive="sum" dur="1.2s"/&gt;
  &lt;!-- Show course of ball --&gt;
  &lt;animateMotion href="ball" begin="-0.312s" path="&hellip;"/&gt;
&lt;/seq&gt;
        </pre>
        <h4>Timesheets</h4>
        <p>
          In simple examples such as the above cartoon, it is useful to
          represent graphical content and timing side-by-side.
          However, for applications that involve complex sequencing of effects
          it is often convenient to separate the temporal markup into a separate
          subtree or document sometimes referred to as
          a &ldquo;timesheet&rdquo;&mdash;the temporal equivalent of
          a stylesheet.
        </p>
        <p>
          Such a timesheet may define animations directly or simply set classes
          and define the animation effects using, for example, CSS Animations
          [[CSS3-ANIMATIONS]].
        </p>
        <p>
          For example, the title screen and first scene of an interactive
          story might use the following timesheet:
        </p>
        <pre class='example sh_html'>
&lt;!-- Title screen --&gt;
&lt;seq begin="0s"&gt;
  &lt;!-- Draw curtains to the side --&gt;
  &lt;par&gt;
    &lt;animate href="leftCurtain" attributeName="transform"
      to="translate(-100 0)" dur="1s" additive="sum"/&gt;
    &lt;animate href="rightCurtain" attributeName="transform"
      to="translate(100 0)" dur="1s" additive="sum"/&gt;
  &lt;/par&gt;
  &lt;!-- Then show the title by setting a class which may trigger,
       for example, a fade animation defined in CSS --&gt;
  &lt;set href="title" attributeName="class" to="active"/&gt;
&lt;/seq&gt;

&lt;!-- Show the first scene when the user clicks the title screen --&gt;
&lt;seq begin="titleScreen.click" restart="whenNotActive"&gt;
  &lt;!-- Cross fade to show background --&gt;
  &lt;par&gt;
    &lt;animate href="titleScreen" attributeName="opacity" to="0" dur="1s"/&gt;
    &lt;animate href="scene1Background" attributeName="opacity" to="1" dur="1s"/&gt;
  &lt;/par&gt;
  &lt;!-- Move narrator onstage --&gt;
  &lt;animate href="narrator" attributeName="transform"
    to="translate(180 90)" dur="0.3s"/&gt;
  &lt;!-- Set the active class on the narrator which may trigger further
       animations or perhaps update the pointer-events property so he
       becomes clickable--&gt;
  &lt;set href="narrator" attributeName="class" to="active"/&gt;
&lt;/seq&gt;
        </pre>
        <p>
          The triggers for these effects can be defined declaratively as in
          the example above or they can be applied using script (see the
          <code>beginElement</code> and <code>beginElementAt</code> methods).
        </p>
        <div class="feedbackWanted">
          <p>
            For more complex usage such as an interactive comic book the
            following features would be useful:
          </p>
          <ul>
            <li>Ability to define a &ldquo;sequence&rdquo; (which may or may not
                be a type of <code>&lt;seq&gt;</code>) where each step is
                gated on certain conditions (e.g. mouse clicks or keyboard
                presses).
            <li>Ability to step backwards through such a sequence.
            <li>Ability to define alternative animations when stepping
                backwards.
            <li>Ability to step forwards causing the current in-play step to
                skip to its end and triggering the next step.
            <li>Ability to hyperlink to a particular step (including when steps
                when such steps are nested)
          </ul>
          <p>
            The features currently defined in this specification can be used to
            realize some of these sort of use cases but typically it is
            quite cumbersome.
          </p>
          <p>
            It is possible to extend this specification to cover the above
            features or we can defer it and introduce a more fully-featured
            state tracking feature in a subsequent version.
          </p>
        </div>
        <h4>Round-trip ad-hoc animation</h4>
        <p>
          When performing DOM manipulation, it is often useful to attach
          animation to an element in such a form that it can be serialized for
          later playback and editing.
        </p>
        <p>
          For example, a presentation authoring tool allows a user to select
          items on a slide and tween their various properties at different times
          or in response to events such as mouse clicks.
          This could be achieved by annotating the element in question with
          a child element as follows:
        </p>
        <pre class='example sh_html'>
&lt;image&gt;
  &lt;animate begin="3s" dur="1s" attributeName="opacity" to="1" fill="forwards"/&gt;
&lt;/image&gt;
        </pre>
        <p>
          In many cases, such an approach is easier to generate and re-parse
          than doing so with stylesheet animation:
        </p>
        <pre class='example sh_html'>
&lt;image&gt;
  &lt;style scoped&gt;
    image {
      animation: fadeIn 1s 3s forwards;
    }
    @keyframes fadeIn {
      to {
        opacity: 1.0;
      }
    }
  &lt;/style&gt;
&lt;/image&gt;
        </pre>
        <h4>Frame-based animation</h4>
        <p>
          Rather than smoothly tweening values, sometimes it is desirable to
          overlay a series of independent images in quick succession.
        </p>
        <p>
          For example, a children's workshop teaching animation principles
          allows children to draw a series of similar images and then show and
          hide them in turn creating the illusion of movement.
        </p>
        <p>
          Supposing each drawn image is contained in an SVG
          <code>&lt;g&gt;</code> element, the animation could be produced as
          follows:
        </p>
        <pre class='example sh_html'>
  &lt;!-- Graphical content --&gt;
  &lt;g class="frame" visibility="hidden"&gt;&hellip;&lt;/g&gt;
  &lt;g class="frame" visibility="hidden"&gt;&hellip;&lt;/g&gt;
  &lt;g class="frame" visibility="hidden"&gt;&hellip;&lt;/g&gt;
  &lt;g class="frame" visibility="hidden"&gt;&hellip;&lt;/g&gt;

  &lt;!-- Timing --&gt;
  &lt;seq repeatCount="indefinite"&gt;
    &lt;set select=".frame" dur="0.2s" attributeName="visibility" to="visible"/&gt;
  &lt;/seq&gt;
        </pre>
        <h4>Animated user interface widgets</h4>
        <p>
          User interface widgets are often accompanied by animated effects that
          provides affordances to the user.
          These effects should be defined in a manner that allows re-use across
          a variety of similar widgets.
        </p>
        <p>
          For example, following is a re-usable definition of mouse hover
          effects applied to some content representing a button.
        </p>
        <pre class='example sh_html'>
&lt;!-- A button-like object --&gt;
&lt;g role="button"&gt;
  &lt;rect &hellip; /&gt;
  &lt;text filter="child"&gt;
    &lt;filter &hellip; /&gt;&hellip;&lt;feGaussianBlur &hellip; /&gt;&lt;/filter&gt;
    Button label
  &lt;/text&gt;
&lt;/g&gt;

&lt;!-- A complex mouseover effect --&gt;
&lt;par select="g[role=button]" begin="mouseover" end="mouseout"&gt;
  &lt;!-- Tween background color of button --&gt;
  &lt;animate select="rect" attributeName="fill" to="blue" dur="0.3s" fill="forwards"/&gt;
  &lt;seq&gt;
    &lt;!-- Wiggle text to the side --&gt;
    &lt;animate select="text" attributeName="transform" dur="0.3s"
      additive="sum" values="translate(0); translate(-10); translate(0)"/&gt;
    &lt;!-- Then make it glow by tweaking part of the filter --&gt;
    &lt;animate select="feGaussianBlur" attributeName="stdDeviation"
      from="0" to="2" fill="forwards" dur="0.3s"/&gt;
  &lt;/seq&gt;
&lt;/par&gt;

&lt;!-- Fade out button background on mouseout --&gt;
&lt;par select="g[role=button]" begin="mouseout" end="mouseover; indefinite"&gt;
  &lt;animate select="rect" begin="mouseout" attributeName="fill"
    to="navy" dur="0.3s" fill="forwards"/&gt;
  &lt;set select="feGaussianBlur" attributeName="stdDeviation" to="0"/&gt;
&lt;/par&gt;
        </pre>
        <div class="annotation">
          This use case would also benefit from the custom reversing suggested
          for timesheets / interactive comics.
        </div>
      </section>
      <section>
        <h2>Relationship to SVG 1.1 Animation</h2>
        <p>
          This specification is intended to be backwards-compatible with the
          animation features defined in SVG 1.1 Second Edition [[SVG11]] with
          the following exceptions:
        </p>
        <ul>
          <li>The special behavior of a frozen to-animation has been altered to
              follow the regular behavior of the model since no user agent
              implemented the specified behavior.
          <li>The procedure for resolving syncbase dependencies and particularly
              breaking cyclic dependencies has been rewritten in a manner that
              may produce slight variations in some circumstances.
              This was done because the previous definition was incredibly vague
              and as a result was implemented inconsistently in every user
              agent.
          <li>The <span class="elem">animateColor</span> element has been
              removed since it was deprecated in SVG 1.1.
        </ul>
        <p>
          The following features defined in SVG 1.1 have been deprecated in this
          specification:
        </p>
        <ul>
          <li>The <span class="elem">animateTransform</span> element.
              This is because the <span class="elem">animate</span> element is
              now able to animate transform lists which produces more
              predictable behavior that avoids many of the issues surrounding
              <span class="elem">animateTransform</span>.
        </ul>
        <p>
          The following additional features not present in SVG 1.1 have been
          added to this specification:
        </p>
        <ul>
          <li>All features are now defined in terms of the Web Animations
              [[WEBANIMATIONS]] model providing a consistent foundation for
              applications also using CSS-based animations or the Web Animations
              API.
              This also makes it possible for the author to programmatically
              inspect and modify the animations generated by the markup defined
              in this specification.
          <li>The <span class="elem">par</span> and
              <span class="elem">seq</span> elements have been introduced to
              provide more powerful synchronization behavior that avoids many of
              the problems associated with syncbase timing such as being unable
              to cancel a chain of animations or seek a document in constant
              time.
              These elements also facilitate re-use of complex animation
              definitions.
          <li>Animation elements now include the <span
              class="attr">select</span> attribute for targetting a range of
              elements making animations re-useable
              (see <a
              href="#attributes-to-identify-the-target-elements-for-a-timed-element"
              class="sectionRef"></a>).
          <li>The <span class="attr">href</span> attribute no longer requires
              the XLink namespace in keeping with changes made in SVG 2.0
              (see <a
              href="#attributes-to-identify-the-target-elements-for-a-timed-element"
              class="sectionRef"></a>).
          <li>The <span class="attr">cancel</span> attribute has been added to
              completely remove an animation or a group of animations including
              fill effects when its conditions are met.
          <li>The <span class="attr">reverse</span> attribute has been added to
              specify conditions that cause and animation or a group of
              animations to change direction.
          <li>The <span class="attr">repeatStart</span> attribute has been added
              to allow starting an animation part-way through its interval.
          <li>The <span class="attr">playback-rate</span> attribute has been
              added to control the playback rate of animations and groups
              including reversing them.
          <li>The <span class="attr">direction</span> attribute has been added
              to allow controlling the direction of alternate iterations of
              animations and groups.
          <li>The <span class="attr">easing</span> and <span
              class="attr">easing-times</span> attributes have been added to
              allow specifying easing behavior using a common syntax to CSS and
              Web Animations including the ability to specify step timing
              functions.
          <li>The <span class="attr">fill</span> attribute has been extended to
              support the &lsquo;backwards&rsquo;, &lsquo;both&rsquo;, and
              &lsquo;auto&rsquo; values.
          <li>The <span class="elem">discard</span> element has been added so
              that long-running animations can manually remove no-longer needed
              resources and provide more performant playback, particularly on
              resource-constrained devices.
          <li>The <span class="attr">timelineStart</span> attribute has been
              added to allow starting animations prior to the document load
              event such as &ldquo;spinner&rdquo; and progress-bar animations
              shown during page load.
          <li>The <code>beginElement</code> and <code>beginElementAt</code>
              methods have been extended to allow applying an animation
              definition to an arbitrary target element or in an arbitrary
              context (for example, another document;
              see <a href="#timed-element-interfaces" class="sectionRef"></a>).
        </ul>
        <div class="todo">
          Link the above to the appropriate sections once they have been
          written.
        </div>
        <div class="todo">
          Add support for Web Animations custom effects&mdash;perhaps through
          a <code>sample</code> event dispatched to animation elements, or
          perhaps only those that don't specify any <a>target elements</a>.
        </div>
      </section>
      <section>
        <h2>Relationship to SMIL Animation</h2>
        <p>
          To the extent that this specification is backwards-compatible with SVG
          1.1's animation features, most of which are defined in terms of SMIL
          Animation [[SMIL-ANIMATION]], this specification defines many features
          similar to those defined in SMIL Animation.
          However, since such features are fully-defined either in this
          specification or in Web Animations [[!WEBANIMATIONS]], this
          specification does not make any normative reference to SMIL Animation.
        </p>
      </section>
      <section>
        <h2>Relationship to Web Animations</h2>
        <p>
          Many of the features defined in this specification are defined in
          terms of the Web Animations [[!WEBANIMATIONS]] model which serves as
          a normative reference for this specification.
        </p>
      </section>
    </section>

    <section>
      <h2>Timed elements</h2>
      <p>
        This specification defines a number of elements that share common timing
        behavior referred to as <dfn title="timed element">timed elements</dfn>.
        The common timing features of timed elements are described first
        followed by the specific elements.
      </p>
      <section class="informative">
        <h2>Introduction</h2>
        <p>
          The <a>timed elements</a> defined by Animation Elements act as
          templates for creating animations and timing groups as defined by
          [[!WEBANIMATIONS]].
        </p>
        <p>
          The relationship between <a>timed elements</a> and Web Animations'
          timed items is one-to-many since:
        </p>
        <ul>
          <li>multiple elements may be targetted (for example,
              <code>select="div.warning"</code>),
          <li>animation triggers may match multiple times (for example,
              <code>begin="2s; 5s; click"</code>),
          <li>automatically-generated reverse effects are realized by separate
              timed items (for example <code>reverse="mouseout"</code>), and
          <li>a timed element can be applied to an arbitrary target using the
              <code>beginElement</code> and <code>beginElementAt</code> methods
              which will generate further timed items.
        </ul>
        <p class="todo">
          Example and diagram
        </p>
      </section>
      <section>
        <h2>Timed element hierarchies</h2>
        <p>
          <a>Timing group elements</a> can contain other <a>timed elements</a>
          to produce hierarchical tree structures.
          Such structures can be described using the following definitions:
        </p>
        <dl>
          <dt><dfn>parent timed element</dfn></dt>
          <dd>
            For a given <a>timed element</a> <var>A</var>, the first <a>timed
            element</a>, if any, encountered when traversing the list of <a
            href="http://www.w3.org/TR/dom/#concept-tree-ancestor">ancestor
            elements</a> [[!DOM4]] beginning with the <a
            href="http://www.w3.org/TR/dom/#concept-tree-parent">parent</a>
            [[!DOM4]] of <var>A</var> and without leaving the current <a
            href="http://www.w3.org/TR/SVG2/intro.html#TermSVGContext">SVG
            context</a> [[!SVG2]].
          </dd>
          <dt><dfn>child timed element</dfn></dt>
          <dd>
            A <a>timed element</a> whose <a>parent timing group</a> is this
            <a>timed element</a>.
          </dd>
          <dt><dfn>root timed element</dfn></dt>
          <dd>
            A <a>timed element</a> with no <a>parent timed element</a>.
          </dd>
        </dl>
      </section>
      <section>
        <h2>Namespace</h2>
        <p>
          The <a>timed elements</a> defined in this specification belong to the
          SVG namespace as defined in [[!SVG11]].
        </p>
        <div class="issue">
          <p>If SVG2 allows SVG elements to exist outside the SVG namespace then
             we will reflect that here as well.</p>
          <p>Furthermore, SVG2 aside, it may be worth investigating allowing
             these elements directly in HTML.</p>
        </div>
      </section>
      <section>
        <h2>Attributes to identify the target elements for a timed element</h2>
        <p>
          Each <a>timed element</a> may specify a set of <dfn>target
          elements</dfn> which are used to determine:
        </p>
        <ul>
          <li>which <a
              href="http://www.w3.org/TR/web-animations/#dfn-target-element">timed items</a> to generate for a given <a>context
              node</a>,
          <li>the scopes in which the <a>target elements</a> of <a>child
              timed elements</a> are resolved, and
          <li>the <a
              href="http://www.w3.org/TR/web-animations/#dfn-target-element">target
              elements</a> of the <a
              href="http://www.w3.org/TR/web-animations/#dfn-animation">animations</a>
              generated by <a>animation elements</a>.
        </ul>
        <p class="annotation">
          When we add media reference elements, the <a>target elements</a> will
          be used to establish the source media element when not explicitly set.
        </p>
        <p>
          Each element in the list of <a>target elements</a> may have an
          associated <dfn>context element</dfn> which represents the scope in
          which the reference to the target element was resolved.
          Each pair of a target element and optional <a>context element</a> is
          unique within the list of <a>target elements</a>.
        </p>
        <p>
          The following attributes are the <dfn>target element attributes</dfn>
          which specify the <a>target elements</a> for a <a>timed element</a>.
        </p>
        <p><em>Attribute definitions:</em></p>
        <table class="propdef attrdef">
          <thead>
            <tr>
              <th>Name
              <th>Value
              <th>Lacuna value
              <th>Animatable
          <tbody>
            <tr>
              <td><span class="attr">select</span>
              <td><a
                  href="http://www.w3.org/TR/selectors4/#selector-list">&lt;selector-list&gt;</a>
              <td>(none)
              <td>No
          <tbody>
            <tr>
              <td><span class="attr">href</span>
              <td>local IRI
              <td>(none)
              <td>No
            <tr>
              <td><span class="attr">xlink:href</span>
              <td>local IRI
              <td>(none)
              <td>No
        </table>
        <p>
          A <a>timed element</a> where one or more of the <a>target element
          attributes</a> is specified is said to have a <dfn>specified
          target</dfn>.
          The list of <a>target elements</a> of a <a>timed element</a> without
          a <a>specified target</a> is an empty list.
        </p>
        <p>
          If more than one of the <a>target element attributes</a> is specified
          then the attribute with the highest precedence is used even if its
          value is empty or invalid; the other attributes are ignored.
          <span class="attr">select</span> has the highest precedence followed
          by <span class="attr">href</span> then <span
          class="attr">xlink:href</span>.
        </p>
        <p>
          A set of <a>target elements</a> is resolved with reference to a given
          <dfn>context node</dfn> which may be either an <a
          href="http://www.w3.org/TR/dom/#concept-element">element</a> or
          a <a
          href="http://www.w3.org/TR/dom/#concept-document">document</a>. 
        </p>
        <p>
          The <span class="attr">href</span> and <span
          class="attr">xlink:href</span> attributes specify an element
          belonging to the same document as the <a>context node</a>'s <a
          href="http://www.w3.org/TR/dom/#concept-node-document">node
          document</a>.
          The syntax is that of a fragment identifier including the leading hash
          (#, U+0023) but <em>without</em> an absolute IRI or relative IRI as
          defined by [[!IRI]]. For example, <code>#button12</code>.
          The fragment identifier is interpreted as an ID reference which is
          resolved using the same definition for <a
          href="http://www.w3.org/TR/dom/#dom-document-getelementbyid">getElementById</a>
          from [[!DOM4]] with the <a>context node</a> as the <var>context
          object</var>.
          If no element matches the ID reference or it is malformed, the
          resulting set of <a>target elements</a> is an empty list.
        </p>
        <p>
          The <span class="attr">select</span> attribute specifies a CSS <a
          href="http://www.w3.org/TR/selectors4/#selector-list">selector
          list</a> [[!SELECTORS4]] that is matched against the subtree beginning
          with the <a>context node</a> using the same procedure as for <a
          href="http://www.w3.org/TR/selectors-api2/#queryselectorall">querySelectorAll</a>
          [[!SELECTORS-API2]].
          If no element matches or the selector list is malformed, the
          resulting set of <a>target elements</a> is an empty list.
        </p>
        <p class="todo">
          <span class="attr">select</span> should match content inside
          a seamless iframe
        </p>
        <p class="todo">
          Describe how to handle changes to what is selected (including an
          iframe becoming seamless or not).
        </p>
        <p class="todo">
          Describe how to handle dynamic changes to the attributes.
        </p>
        <section>
          <h3>Generating new instances</h3>
          <p>
            <dfn title="generate new instances">New instance are
            generated</dfn> for a given <a>timed element</a>, <var>current
            element</var>, and either:
          </p>
          <ul>
            <li>a <a>context node</a>, <var>current context</var>, or
            <li>a <a>target element</a>, <var>initial target</var>,
          </ul>
          <p>using the following procedure.</p>
          <ol>
            <li>Initialize the list of <var>target elements</var> based on the
                first matching condition from the following:
              <dl class="switch">
                <dt>If an <var>initial target</var> is provided,</dt>
                <dd>
                   Let <var>target elements</var> be a list consisting of
                   a single element, <var>initial target</var>.
                </dd>
                <dt>If <var>element</var> has a <a>specified target</a>,</dt>
                <dd>
                  Let <var>target elements</var> be the result of evaluating the
                  <var>current element</var>'s <a>target element attributes</a>
                  as defined in <a
                  href="#attributes-to-identify-the-target-elements-for-a-timed-element"
                  class="sectionRef"></a> using <var>current context</var> as
                  the <a>context node</a>.
                </dd>
                <dt>Otherwise,</dt>
                <dd>
                  Let <var>target elements</var> be a list consisting of
                  a single element, <var>current context</var>.
                </dd>
              </dl>
            <li>Let <var>generated items</var> be an empty list.
            <li>For each element, <var>current target</var>, in <var>target
                elements</var>:
              <ol>
                <li>Let <var>current item</var> be the result of generating a
                    timed item for the specific type of <var>current
                    element</var> as defined in <a
                    href="#generating-an-instance-of-an-animation-element"
                    class="sectionRef"></a> <span class="todo">and so on (TBD:
                    add specific references here to other sections as they are
                    added).</span>
                    The <a>context node</a> to be passed in each case is
                    <var>current target</var>.
                <li>If <var>current element</var> is a <a>group timing
                    element</var>, then for each <a>child timed item</a>,
                    <var>current child</var> of <var>current element</var>
                    perform the following steps:
                    <ol>
                      <li>Recursively apply this procedure (i.e. <a
                        href="#generating-new-instances"
                        class="sectionRef"></a> with <var>current child</var> as
                        the <a>context node</a>.
                      <li>Append the resulting list of timed items to
                        <var>current item</var>'s list of <a
                        href="http://www.w3.org/TR/web-animations/#dfn-child-timed-item">child
                        timed items</a>.
                    </ol>
                    <li>Append <var>current item</var> to <var>generated
                        items</var>.
              </ol>
            <li>Return <var>generated items</var>.
          </ol>
          <p class="todo">
            Make a section about interval handling where we say that when the
            conditions match, we call the above procedure using the <a
            href="http://www.w3.org/TR/dom/#concept-node-document">node
            document</a> of the <a>timed element</a> as the <a>context node</a>.
            For external timesheets we'll need to override it.
          </p>
        </section>
      </section>
      <section>
        <h2>Attributes to control the triggering of timed elements</h2>
        <section>
          <h3>The <span class="attr">begin</span> attribute</h3>
          <p class="todo">
            TBD.<br>
            Need to define that this is ignored in template-contexts. It's
            treated as if it was indefinite.
          </p>
        </section>
      </section>
      <section>
        <h2>Attributes to control timing</h2>
      </section>
      <section>
        <h2>Timed element interfaces</h2>
        <dl title="interface TimedElement" class="idl">
          <dt>sequence&lt;TimedItem&gt; beginElement(optional BeginElementOptions options)</dt>
          <dd>
            <p>
              <a title="generate new instances">Generates new instances</a> from
              this timed element.
            </p>
            <p>
              The <var>target element</var> or <var>context node</var> is based
              on the first matching condition from below:
            </p>
            <dl class="switch">
              <dt>If <code>options</code> and <code>options.target</code> are
                  not <code>null</code>,</dt>
              <dd>Use <code>options.target</code> as the <var>target
                  element</var>.</dd>
              <dt>If <code>options</code> and <code>options.context</code> are
                  not <code>null</code>,</dt>
              <dd>Use <code>options.context</code> as the <var>context
                  node</var>.</dd>
              <dt>Otherwise,</dt>
              <dd>Use the <a
                  href="http://www.w3.org/TR/dom/#concept-node-document">node
                  document</a> of this element as the <var>context
                  node</var>.</dd>
            </dl>
            <p>
              The return value is the set of generated timed items as returned
              by <a href="#generating-new-instances" class="sectionRef"></a>.
            </p>
          </dd>
          <dt>sequence&lt;TimedItem&gt; beginElementAt(float offset,
            optional BeginElementOptions options)</dt>
          <dd>
            <p class="todo">
              TBD.
            </p>
          </dd>
        </dl>
        <dl title="dictionary BeginElementOptions" class="idl">
          <dt>Element? target = null</dt>
          <dd>
          </dd>
          <dt>(Element or Document)? context = null</dt>
          <dd>
          </dd>
          <dt>BeginElementAtReferenceTime since = "now"</dt>
          <dd>
          </dd>
        </dl>
        <p class="issue">
          Add <code>sequence&lt;Element&gt;? targets = null</code> as well?
        </p>
        <dl title="enum BeginElementAtReferenceTime" class="idl">
          <dt>now</dt>
          <dd>
          </dd>
          <dt>start</dt>
          <dd>
          </dd>
        </dl>
      </section>
      <section>
        <h2>Animation elements</h2>
        <section>
          <h2>Attributes to identify the target attribute or property for an
              animation</h2>
        </section>
        <section>
          <h2>Attributes that define animation values over time</h2>
        </section>
        <section>
          <h2>Attributes that control whether animations are additive</h2>
        </section>
        <section>
          <h2>Elements, attributes and properties that can be animated</h2>
        </section>
        <section>
          <h2>Generating an instance of an animation element</h2>
          <p>
            <a>Animation elements</a> generate <a
            href="http://www.w3.org/TR/web-animations/#dfn-animation">animations</a>.
          </p>
          <p>
            The <a
            href="http://www.w3.org/TR/web-animations/#dfn-target-element">target
            element</a> of the generated animation is the <a>context node</a>
            provided when the animation was generated, provided it is an <a
            href="http://www.w3.org/TR/dom/#concept-element">element</a>.
            If the <a>context node</a> is a <a
            href="http://www.w3.org/TR/dom/#concept-document">document</a> the
            target element is the parent element of the <a>animation
            element</a>'s <a>root timed element</a>.
          </p>
          <p class="issue">
            What if the <a>root timed element</a> is not in the same document as
            the context node?
            Generate the animation with no target element? Abort?
          </p>
        </section>
        <section>
          <h2>The <span class="elem">animate</span> element</h2>
        </section>
        <section>
          <h2>The <span class="elem">set</span> element</h2>
        </section>
        <section>
          <h2>The <span class="elem">animateMotion</span> element</h2>
        </section>
      </section>
      <section>
        <h2>Timing group elements</h2>
        <section>
          <h2>The <span class="elem">par</span> element</h2>
        </section>
        <section>
          <h2>The <span class="elem">seq</span> element</h2>
        </section>
      </section>
      <section>
        <h2>Structural elements</h2>
        <section>
          <h2>The <span class="elem">discard</span> element</h2>
        </section>
      </section>
      <section>
        <h2>Deprecated elements</h2>
        <section>
          <h2>The <span class="elem">animateTransform</span> element</h2>
        </section>
      </section>
    </section>

    <section>
      <h2>Integration with SVG</h2>
      <section>
        <h2>Start of the timeline</h2>
      </section>
      <section>
        <h2>The <span class="elem">svg</span> element</h2>
      </section>
      <section>
        <h2>Reclaiming resources</h2>
      </section>
      <section>
        <h2>Animations in elements referenced by a
            <span class="elem">use</span> element</h2>
        <p class="issue">
          Can you have <span class="elem">use</span> elements inside
          a <span class="elem">par</span> or <span class="elem">seq</span> that
          pull in other animation elements?
        </p>
        <p class="issue">
          What is the behavior in general?
        </p>
      </section>
      <section>
        <h2>Integration with Media Fragments</h2>
        <p>
          The Media Fragments specification [[!MEDIA-FRAGMENTS]] defines a means
          for addressing a temporal range of a media resource.
          The application of the temporal parameters to documents with the <a
          href="http://www.w3.org/TR/SVG/intro.html#MIMEType">SVG MIME type</a> 
          [[!SVG11] is as follows.
        </p>
        <ul>
          <li>If there is a begin time, seek the document controller to
              the begin time at the earliest of two moments: when the document
              begins to play or document load.
              <p class="note">
                Note that seeking behavior is well-defined even when the
                document has yet to start.
              </p>
          </li>
          <li>If there is an end time, set a flag on the controller to say
              auto-pause at the given time.</li>
          <li>Any calls to seek / pause / play etc. on that controller clear the
              flag.</li>
          <li>If the controller reaches (or passes) the end time and the flag is
              still set, call pause and clear the flag.</li>
        </ul>
        <p class="todo">
          What happens if the fragment is changed after the document has loaded
        </p>
        <p class="note">
          Note that media fragments are defined to operate on resources based on
          their MIME type.
          As a result, temporal addressing may not have any effect for SVG
          content that is served in a document with a MIME type other than the
          SVG MIME type such as SVG embedded in HTML.
        </p>
      </section>
    </section>

    <section>
      <h2>Resources in other documents</h2>
      <div class="todo">
        <p>
          Need to define the document time used when:
        </p>
        <ul>
          <li>You have an animation element in a separate
              document&mdash;presumably you should use the document time of the
              target elements.</li>
          <li>What if you put a filter in a separate document and then pull it
              in?</li>
          <li>Likewise for clip paths, images referenced by image, iframe, use
              etc.</li>
        </ul>
      </div>
    </section>

    <section>
      <h2>DOM interfaces</h2>
      <section>
        <h2>The <code>TimedElement</code> interface</h2>
        <p>
          <dl title="interface TimedElement : Element" class="idl">
          </dl>
        </p>
        <div class="issue">
          <p>
            Need to add <code>ownerSVGElement</code> from
            <code>SVGElement</code> interface?
          </p>
          <p>
            Add other attributes from <code>SVGElement</code> for backwards
            compatibility?
          </p>
        </div>
      </section>
      <section>
        <h2>The <code>AnimationElement</code> interface</h2>
        <p>
          <dl title="interface AnimationElement : TimedElement" class="idl">
          </dl>
        </p>
      </section>
      <section>
        <h2>Reflecting changes to the DOM</h2>
      </section>
    </section>
  </body>
</html>
